<template>
  <view class="biscuit-mall">
    <view class="biscuit-account">
      <view class="info">
        <view
          class="user-avatar"
          :style="{ backgroundImage: `url(${user.icon})` }"
        ></view>
        <view class="user-nickname">{{ user.nickname }}</view>
      </view>
      <button @click.stop="getMoreBiscuit">赚取更多的小饼干</button>
    </view>
    <view class="biscuit-total">
      <label>我的小饼干</label>
      <view class="biscuit">
        <image :src="ossImg('biscuit/aoliao.png')" />
        <label>{{ user?.memberScore?.surplusScore }}</label>
      </view>
    </view>

    <scroll-view class="biscuit-categories" scroll-x="true">
      <view
        v-for="(item, index) in categories"
        :key="index"
        :class="{ current: item.id === form.classificationId }"
        @click.stop="handleChangeCategory(item)"
        >{{ item.name }}</view
      >
    </scroll-view>

    <view class="goods-list">
      <view
        class="biscuit-goods"
        v-for="item in goodsData"
        :key="item.id"
        @click.stop="viewGoodsDetail(item)"
      >
        <view
          class="goods-cover cover"
          :style="{ backgroundImage: `url(${item.imageUrl})` }"
        />
        <view class="goods-info">
          <label>{{ item.name }}</label>
          <view class="goods-price">
            <image :src="ossImg('biscuit/aoliao.png')" />
            <label>{{ item.score || 0 }}小饼干</label>
          </view>
        </view>
      </view>
    </view>
  </view>
  <button open-type="contact" @click.stop="toKefu">
    <view class="oreo-service">
      <image :src="ossImg('personal/kf_icon@2x.png')" />客服
    </view>
  </button>

  
</template>

<script setup>
import { reactive, ref } from "vue";
import { GetCategoryGoods, GetProductCategories } from "@/services/mall";
import { onLoad, onShow, onUnload, onHide } from "@dcloudio/uni-app";
import { ossImg } from "@/utils/utils";
import privacyPopup from "@/components/privacy-popup";

let enterTime = "";
let outTime = "";
let stayTime = "";

const goodsData = ref([]);
const form = reactive({ classificationId: "" });
const user = ref({});
const categories = ref([]);
const pagination = ref({
  productType: 2,
});

onLoad(() => {});

onShow(() => {
  getGoods();
  getCategories();
  getApp()
    .getUserInfo()
    .then((res) => {
      user.value = res;
    });
  getApp().accessLogAdd();
  // 用户进入时间
  enterTime = new Date();
});

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "points_store_page",
    "view",
    "points_store_page",
    stayTime
  );
});

onUnload(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;
  getApp().emdlz(
    "track",
    "event",
    "points_store_page",
    "view",
    "points_store_page",
    stayTime
  );
});

// 赚取更多小饼干
const getMoreBiscuit = () => {
  uni.navigateTo({ url: "/integralPages/integral/integral" });
};

const getGoods = async () => {
  const { data } = await GetCategoryGoods({
    ...form,
    ...pagination.value,
  });
  goodsData.value = data;
};

const viewGoodsDetail = ({ id }) => {
  getApp().emdlz(
    "track",
    "event",
    "points_store_page",
    "click",
    `select_sku_${id}`,
    ""
  );
  uni.navigateTo({ url: `/personalPages/biscuit/goods?id=${id}` });
};

const toKefu = () => {
  getApp().emdlz("track", "event", "homepage", "click", "customer_service", "");
  getApp().sr().track("start_consult", {
    action_type: "consult_online",
    // more...
  });
};

const handleChangeCategory = ({ id }) => {
  console.log(id);
  form.classificationId = form.classificationId === id ? "" : id;
  if (id === "") {
    getApp().emdlz(
      "track",
      "event",
      "points_store_page",
      "click",
      "all_peripheral",
      ""
    );
  }
  getGoods();
};

const getCategories = async () => {
  const { data } = await GetProductCategories({ productType: 2 });
  if (!data.length) return;
  data.unshift({
    id: "",
    name: "全部",
  });
  categories.value = data;
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.biscuit-mall {
  width: 100%;
  min-height: 100vh;
  background-color: white;
  padding: 4px 12px;
  box-sizing: border-box;
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
}

.biscuit-goods {
  flex: 1;
  max-width: 50%;
  margin-right: 9px;
  padding: 5px 5px 0 5px;
  box-sizing: border-box;
  box-shadow: 0px 1px 6px 0px rgba(110, 110, 110, 0.18);
  border-radius: 8px;
  margin-bottom: 9px;

  &:nth-child(even) {
    margin-right: 0;
  }

  .goods-cover {
    width: 158px;
    height: 158px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .goods-info {
    height: 85px;
    padding: 5px 0 12px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #3c3c3c;

    label {
      flex: 1;
    }
  }

  .goods-price {
    font-size: 16px;
    color: @primary-color;
    line-height: 1;
    display: flex;
    align-items: flex-end;

    image {
      width: 17px;
      height: 20px;
      margin-right: 5px;
    }
  }
}

.biscuit-categories {
  display: flex;
  padding: 15px 0;
  height: 26px;

  view {
    display: inline-block;
    margin-right: 12px;
    padding: 0 13px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    color: @primary-color;
    font-size: 16px;

    &.current {
      color: white;
      background-color: @primary-color;
      border-radius: 13px;
    }
  }
}

.biscuit-total {
  color: white;
  height: 48px;
  padding: 0 22px;
  box-sizing: border-box;
  background: #0058c6;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .biscuit {
    font-size: 25px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: center;

    image {
      width: 17px;
      height: 20px;
      margin-right: 10px;
      display: block;
    }
  }
}

.biscuit-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;

  .info {
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .user-avatar {
      width: 134rpx;
      height: 134rpx;
      box-sizing: border-box;
      border: 8rpx solid #4b72bb;
      border-radius: 134rpx;
      background-color: white;
      margin-right: 23rpx;
      background-repeat: no-repeat;
      background-position: top;
      background-size: cover;
    }

    .user-nickname {
      color: #45494c;
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  button {
    min-width: 104px;
    height: 26px;
    line-height: 25px;
    background: #ffffff;
    border: 1px solid #0059be;
    border-radius: 13px;
    color: @primary-color;
    font-size: 12px;
    padding: 0 8px;
    margin: 0;
    white-space: nowrap;

    &::after {
      border: none;
    }
  }
}
</style>
